<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			body{
				background:url(img/1.jpg);
				opacity: 0.8;
			}
			div img{
				width: 200px;
				margin: 20px 10px;
				padding-left: 22px;
				text-align: center;
			}
		</style>
	</head>
	<body>
		<div>
			<img src="img/1.jpg"/>
			<img src="img/2.jpg"/>
			<img src="img/3.jpg"/>
			<img src="img/4.jpg"/>
			<img src="img/5.jpg"/>
		</div>
		<script>
			var images = document.getElementsByTagName("img");
			var body = document.getElementsByTagName("body");
			for(var i=0;i<images.length;i++){
				images[i].onclick = function(){
					//alert(images.length);
					body.style.backgroundImage = "url("+this.src+")";
				}
			}
		</script>
	</body>
</html>
